https://jsfiddle.net/

===============================

###Example_html Tag

<!-- 제목 -->
<h2 class="article">오늘의 뉴스</h2>

<!-- 문장(텍스트) -->
<p>줄을 나누고 싶어<br>줄을 나눴다</p>

<!-- 링크 -->
<a href="https://www.khu.ac.kr/">
    <h2>링크 클릭해 보세요!</h2>
</a>

<!-- 이미지 -->
<img src="/img_logo.jpg" alt="우리 회사 로고">

<!-- 표(테이블) -->
<table style="width:100%">
    <tr style="background-color:lightgrey">
        <th>동물</th>
        <th>식물</th>
    </tr>
    <tr>
        <td>사자</td>
        <td>소나무</td>
    </tr>
</table>

<!-- 리스트 -->
<ul>
    <li>사과</li>
    <li>멜론</li>
    <li>바나나</li>
</ul>


===============================

###Example_no_java

<!DOCTYPE html>
<html>
<head>
	<title>간단한 웹 페이지</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>
	<!-- HTML 부분 -->
	<h1>안녕하세요!</h1>
	<p>이것은 간단한 웹 페이지입니다.</p>
	<button id="myButton">클릭하세요</button>
	<p id="result"></p>

	<script src="script.js"></script>
</body>
</html>


===============================

###Example_with_css&java

<!DOCTYPE html>
<html>
<head>
	<title>간단한 웹 페이지</title>
	<style>
		/* CSS 부분 */ 
		body {
	    		font-family: Arial; margin: 20px;
		}
		h1 {
	     		color: blue;
		}
	
		button {
	    		background-color: green; 
			color: white;
	    		padding: 10px;
		}
	</style>
</head>
<body>
	<!-- HTML 부분 -->
	<h1>안녕하세요!</h1>
	<p>이것은 간단한 웹 페이지입니다.</p>
	<button id="myButton">클릭하세요</button>
	<p id="result"></p>

	<script>
		// JavaScript 부분
		document.getElementById('myButton').onclick = function() { 
		 	document.getElementById('result').innerHTML = '버튼 클릭!';
		}
	</script>
</body>
</html>
</html>


===============================

###Example_css_selector

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>CSS 선택자 예제</title>
</head>
<body>
	<h1>CSS 선택자 사용법</h1>

	<!-- 태그 선택자 예제 -->
	<div>div 태그 선택자 예제</div>

	<!-- 아이디 선택자 예제 -->
	<p id="query">id가 'query'인 태그 선택</p>

	<!-- 클래스 선택자 예제 -->
	<p class="title">class가 'title'인 태그 선택</p>

	<!-- 태그+아이디 선택자 예제 -->
	<input id="query" placeholder="input 태그 중 id가 query인 요소">

	<!-- 태그+클래스 선택자 예제 -->
	<p class="title">p 태그 중 class가 'title'인 요소</p>

	<!-- 속성 선택자 예제 -->
	<a href="https://example.com">href 속성을 가진 a 태그</a>

	<!-- 자식 선택자 예제 -->
	<ul>
		<li>ul의 직접적인 자식 li</li>
		<li>ul의 또 다른 자식 li</li>
	</ul>

	<!-- 예제에서 언급된 추가 선택자 -->
	<div class="article">
		<h2>article 클래스를 가진 div의 자식 h2</h2>
	</div>

	<div id="main">
		<span class="price">main id를 가진 요소의 자식 span.price</span>
	</div>
</body>
</html>



